{"componentChunkName":"component---src-templates-project-template-project-template-js","path":"/projects/ Trivvy-UI-Design","result":{"data":{"project":{"title":" Trivvy UI Design","id":"6cb24087-880d-5391-9e6d-7c4b44b249ec","description":"UI & UX Design of a company's travelling application, to booking flights, hotels, cars and trains.","languages":["Figma","Ionicons Plugin"],"slug":" Trivvy-UI-Design","content":{"childMarkdownRemark":{"html":"<p><img src=\"//images.ctfassets.net/d8xmlp2haryb/1fzYiGcTw24NNYxzvlMXzD/88818c20ab115805ccad90be5085f8f8/trivvy.PNG\" alt=\"Trivvy Picture 1\"></p>\n<h2>Goal</h2>\n<p>The goal was to make simple booking mobile UI Design, which allows the user to book for a flight, room, bus or train ticket. The app had to show the latest or upcoming booking placed.</p>\n<h2>Problem</h2>\n<p>Many booking systems are too clustered with information, which for simple users like me is very overwhelming.</p>\n<h2>Design System</h2>\n<p>A Design System keeps me consistent through the design of the application.</p>\n<h3>Colors</h3>\n<p><img src=\"//images.ctfassets.net/d8xmlp2haryb/5c0ho7TacciULSbkmhOK68/feea464202bbb51fc173db755803266d/Capture1.PNG\" alt=\"Capture1\"></p>\n<p>I choose these colors, the green and grey and I use the alpha value for controlling the density of the color on the sidenav and sidebar.</p>\n<ol>\n<li>The Green color is known for its nature centered ability to bring to a user and this brings comfortability and calmness to a user as nature does. The user must be at ease and expect that the application is complex.</li>\n<li>The dark grey color is for emphesis or to be more dominant on the page so that a user can always know where the sidenav and sidebar are located.</li>\n</ol>\n<h3>Fonts</h3>\n<p><img src=\"//images.ctfassets.net/d8xmlp2haryb/2aBxvXhQ1JhnN0tCMoukCB/34ce34dcd7c100278dc46b5b42fef20d/Capture4.PNG\" alt=\"Capture4\"></p>\n<p>I chose QuickSand for the font of the application. It brings a friendly look to the user, its not rough, sketchy nor standard but has a play-look on it. It is one of the nicest and used fonts besides Roboto.</p>\n<h3>Icons</h3>\n<p>I have used Ionicons for the icons of the application. They are easy to use, customize and very minimal, which benefits big time when importing them into your app.</p>\n<h2>Results</h2>\n<p><img src=\"//images.ctfassets.net/d8xmlp2haryb/3UiFZ1dLqTieRfWWuDl1Yo/907f5db9c2906d2f4a122e53ba2777e7/chat.PNG\" alt=\"Chat Application UI Design Picture 1\"></p>\n<h2>Conclusion</h2>\n<p>Most booking apps are complex and overwhelming in terms of content so a simple UI Design makes a huge difference.</p>"}}},"site":{"siteMetadata":{"author":"Philane Msibi - UI/UX Designer and Software Developer"}}},"pageContext":{"slug":" Trivvy-UI-Design"}},"staticQueryHashes":[]}